<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>投票</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		#div1 {
			background: #000;
			width: 500px;
			height: 30px;
			position: relative;
		}

		#div2 {
			width: 500px;
			height: 30px;
			position: 600px 20px;
		}

		.a_1,
		.a_2 {
			position: absolute;
			top: 0;
			height: 30px;
		}

		.a_1 {
			left: 0;
			background: greenyellow;
		}

		.a_2 {
			right: 0;
			background: cornflowerblue;
		}

		input {
			margin-top: 30px;
		}
	</style>

</head>

<body style="margin: 20px;">
	投票结果：
	<div id="div1">
		<div class="a_1">50%</div>
		<div class="a_2">50%</div>
	</div>
	<div id="div2">
		<div id="result_1">
			投票1投票数：0
		</div>
		<div id="result_2">
			投票2投票数：0
		</div>
	</div>
	<input type="button" name="aa" value="投票1" />
	<input type="button" name="aa" value="投票2" />
</body>
<script>
	window.onload = function () {
		var oDiv = document.getElementById('div1');
		var aDiv = oDiv.getElementsByTagName('div');
		var oDiv2 = document.getElementById('div2');
		var aDiv2 = oDiv2.getElementsByTagName('div');
		var aBtn = document.getElementsByTagName('input');
		function init(lNum,rNum) {
			var lNum = lNum || 50;
			var rNum = rNum || 50;
			var lNums = (rNum / (lNum + rNum)) * 500;
			var rNums = 500 - lNums;
			aDiv[1].style.width = parseInt(lNums) + 'px';
			aDiv[0].style.width = 500 - parseInt(lNums) + 'px';
			var reg = /[1-9]{1,2}/
			aDiv[0].textContent = lNum + '.' +(Math.floor((lNum / (lNum + rNum)) * 100) / 100).toString().match(reg) + '%';
			aDiv[1].textContent = rNum + '.' + (Math.floor((rNum / (lNum + rNum)) * 100) / 100).toString().match(reg) + '%';
			aDiv2[0].textContent = '投票1投票数：' + (lNum - 50);
			aDiv2[1].textContent = '投票2投票数：' + (rNum - 50);
		}
		init(indexOne, indexTwo);
		var indexOne = 50;
		var indexTwo = 50;
		aBtn[0].onclick = function () {
			indexOne++;
			
			init(indexOne, indexTwo);
		}
		aBtn[1].onclick = function () {
			indexTwo++;
			init(indexOne, indexTwo);
		}
	}
</script>

</html>